<html>
<head>
<style>
body {
  font-family: sans-serif;
}
div#output {
  cursor: pointer;
}
div#switcher {
  cursor: pointer;
}
div#switcher a {
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
canvas.plot {
  border: 1px solid black;
}
div.plot-coordinates {
  font-family: monospace;
}
iframe {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
}
div.selector {
  border: solid 1px black;
  cursor: pointer;
  padding-left: 0.3em;
  background-color: white;
}
div.selector:hover {
  background-color: rgb(200,200,250);
}
div.selected {
  border-left: none;
}
div#selectors {
  width: 80px;
  display: none;
}
</style>
<script src="js/common.js"></script>
<script src="js/plotter.js"></script>
<script src="js/coordinates.js"></script>
<script src="config.js"></script>
<script>
document.title = Config.title;

var params = ParseParams();
if (!('history' in params)) {
  params.history = 150;
  // make this option somewhat user discoverable :-/
  window.location.href = MakeURL(params);
}

var did_position_details = false;

function units_for_trace() {
  if ('trace' in params && params.trace.indexOf('vm-') == 0) {
    return 'bytes'
  } else if ('trace' in params && params.trace.indexOf('io-op') == 0) {
    return 'times'
  } else if ('trace' in params && params.trace.indexOf('io-byte') == 0) {
    return 'KB'
  } else {
    return 'msec'
  }
}

function go_to(trace) {
  params.trace = trace;
  if (params.trace == '')
    delete params.trace;
  window.location.href = MakeURL(params);
}

function on_clicked_plot(cl, value, fuzz, e) {
  document.getElementById('view-change').
      setAttribute('src', Config.changeLinkPrefix + cl);

  document.getElementById('view-pages').
      setAttribute('src', 'details.html?cl=' + cl);

  if (!did_position_details) {
    position_details();
    did_position_details = true;
  }
}

function received_summary(data) {
  var dataGrid = [[],[]];
  var clNumbers = [];
  var rows = data.split('\n');
  var max_rows = rows.length;
  if (max_rows > params.history)
    max_rows = params.history
  var index = 0;
  for (var i = 0; i < max_rows; ++i) {
    // ignore ill-formatted data
    if (rows[i].match(/[\d\.]+ [\d\.]+ [\d\.]+/) == null)
      continue;
    var cols = rows[i].split(' ');

    clNumbers.push(cols[0])
    if (cols.length == 3) {
      dataGrid[0].push( [parseFloat(cols[1]), 0] );
      dataGrid[1].push( [parseFloat(cols[2]), 0] );
    } else  {
      dataGrid[0].push( [parseFloat(cols[1]), parseFloat(cols[2])] );
      dataGrid[1].push( [parseFloat(cols[3]), 0] );
    }
    
    index++;
  }


  dataGrid[0].reverse();
  dataGrid[1].reverse();
  clNumbers.reverse();
  
  var output = document.getElementById("output");
  var plotter = new Plotter(clNumbers, dataGrid, [], units_for_trace(), 
    document.getElementById("output"));
  plotter.onclick = on_clicked_plot;
  plotter.plot();
}

function fetch_summary() {
  if ('trace' in params)
    file = "summary-" + escape(params.trace) + ".dat"
  else
    file = "summary.dat"
  Fetch(file, received_summary);
}

function position_details() {
  var output = document.getElementById("output");  

  var win_height = window.innerHeight;

  var details = document.getElementById("views");

  var views = document.getElementById("views");
  var selectors = document.getElementById("selectors");
  selectors.style.display = "block";

  var views_width = output.offsetWidth - selectors.offsetWidth;

  views.style.border = "1px solid black";
  views.style.width = views_width + "px";
  views.style.height = (win_height - output.offsetHeight - output.offsetTop - 30) + "px";

  selectors.style.position = "absolute";
  selectors.style.left = (views.offsetLeft + views_width + 1) + "px";
  selectors.style.top = views.offsetTop + "px";

  change_view("view-change");
}

function change_view(target) {
  if (target == "view-change") {
    document.getElementById("view-pages").style.display = "none";
    document.getElementById("view-change").style.display = "block";
  } else {
    document.getElementById("view-change").style.display = "none";
    document.getElementById("view-pages").style.display = "block";
  }
}

function init() {
  fetch_summary();
}

window.addEventListener("load", init, false); 
</script>
</head>
<body>
<p>
<div id="header_lookout" align="center">
  <font style='color: #0066FF; font-family: Arial, serif;font-size: 20pt; font-weight: bold;'>
    <script>document.write(Config.title);</script>
  </font>
</div>
<div id="header_text">
Builds generated by the <a href="http://build.chromium.org/">BUILD TYPE</a> build
slave are run through the
<script>
document.write('<a href="' + Config.sourceLink + '">' + Config.title + '</a>');
</script>
and the results of that test are charted here.
</div>
</p>
<p style="font-size: 0.75em; font-style: italic; color: rgb(100,100,100)">
<div id="explain">
<script>
if ('trace' in params && params.trace == 'vm-peak-renderer') {
  document.write(
   "The vertical axis is the peak vm usage for the renderer process, and the " +
   "horizontal axis is the change-list for the build being tested.  The pink " +
   "trace shows the results for the reference build.")
} else if ('trace' in params && params.trace == 'vm-peak-browser') {
  document.write(
   "The vertical axis is the peak vm usage for the browser process, and the " +
   "horizontal axis is the change-list for the build being tested.  The pink " +
   "trace shows the results for the reference build.")
} else if ('trace' in params && params.trace == 'io-op-browser') {
  document.write(
   "This is an experimental page to track IO performance.")
} else if ('trace' in params && params.trace == 'io-byte-browser') {
  document.write(
   "This is an experimental page to track IO performance.")
} else {
  document.write(
   "The vertical axis is the time in milliseconds for the build to complete the " +
   "test, and the horizontal axis is the change-list for the build being " +
   "tested.  Vertical error bars correspond to standard deviation.  The pink " +
   "trace shows the results for the reference build.")
}
</script>
</div>
</p>
<div id="switcher">
  <a onclick="go_to('')">page-load-time</a>
  <a onclick="go_to('vm-peak-browser')">vm-peak-browser</a>
  <a onclick="go_to('vm-peak-renderer')">vm-peak-renderer</a>
  <a onclick="go_to('io-op-browser')">io-op-browser</a>
  <a onclick="go_to('io-byte-browser')">io-byte-browser</a>
</div>
<div id="output"></div>
<div id="details">
  <div id="views">
    <iframe id="view-change"></iframe>
    <iframe id="view-pages"></iframe>
  </div>
  <div id="selectors">
    <div class="selector" onclick="change_view('view-change')">CL</div>
    <div style="border-top: none" class="selector" onclick="change_view('view-pages')">Pages</div>
  </div>
</div>
<pre id="log"></pre>

<script>
if ('lookout' in params) {
  switcher.style.display = "none";
  details.style.display = "none";
  header_text.style.display = "none";
  explain.style.display = "none";
  selection.style.display = "none";
} else {
  document.getElementById("header_lookout").style.display = "none";
}
</script>
</body>
</html>
